<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<html>
	<head>
		<title></title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
		<link rel="stylesheet" type="text/css" href="${ctx}/ui/static/al/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="${ctx}/ui/static/al/css/main.css"/>
		<style>
			#tel{
				width: calc(50% - 4px);
				margin: 0;
				margin-bottom: 20px;
				height: 30px;
				line-height: 30px;
				padding-left: 10px;
				border: 1px solid #CCC;
			}

			select{
				width: 275px;
				margin: 0;
				margin-bottom: 20px;
				height: 30px;
				line-height: 30px;
				padding-left: 10px;
				border: 1px solid #CCC;
			}
		</style>
	</head>
	<body>
		<nav class="navbar navbar-default">
			<div class="container">
				<a class="logo pull-left" href="#">
					<h1>福瑞<span>沃科</span></h1>
				</a>
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse" aria-expanded="false">
				        <span class="sr-only">Toggle navigation</span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				   </button>
				</div>
				<div class="collapse navbar-collapse " id="bs-example-navbar-collapse">
					<ul class="nav navbar-nav navbar-right">
						<li class="navBg"></li>
						<li>
							<a href="${ctx}/website/home/index">网站首页</a>
						</li>
						<li>
							<a href="${ctx}/website/gywm/index">关于我们</a>
						</li>
						<li>
							<a href="${ctx}/website/fwal/index?id=${fwalid}">服务案例</a>
						</li>
						<li>
							<a href="${ctx}/website/xwzx/index?id=${xwzxid}">新闻中心</a>
						</li>
						<li class="active">
							<a href="${ctx}/website/lxwm/index">联系我们</a>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<!--space-->
		<div class="space"></div>
		<div class="conPg">
			<div class="banner">
				<img src="${ctx}/ui/static/al/images/banner/ban2.jpg"/>
			</div>
			<div class="container padT80">
				<div class="map">
					<iframe src="${ctx}/ui/static/al/map/map.jsp"></iframe>
					<div class="loader">
						<img src="${ctx}/ui/static/al/images/loader.gif"/>
					</div>
				</div>
				<div class="address row padT80 padB80">
					<div class="col-sm-6 col-xs-12">
						<section class="title">
							<h2>联系我们</h2>
						</section>
						<ul class="padT80">
							<li><span class="glyphicon glyphicon-phone-alt"></span><h>${fwtel}</h></li>
							<li><span class="glyphicon glyphicon-map-marker"></span><h>${address}</h></li>
							<li><span class="glyphicon glyphicon-envelope"></span><h>${email}</h></li>
							<li><span class="glyphicon glyphicon-phone"></span><h>${tel}</h></li>
						</ul>
					</div>
					<div class="col-sm-6 col-xs-12 padT80">
						<form>
							<input placeholder="姓名" type="name" id="name" name="name"/>
							<input placeholder="邮箱" type="email" id="email" name="email"/>
							<input placeholder="电话(固话:010-88888888)" type="tel" id="tel" name="tel"/>
							<%--<input placeholder="所要需求" id="need" name="need" class="easyui-combobox"  data-options="editable:false,--%>
								<%--valueField: 'value',--%>
								<%--textField: 'text',--%>
								<%--data: [--%>
								<%--{text: '路政系统',value: '路政系统'},--%>
								<%--{text: '运政系统',value: '运政系统'},--%>
								<%--{text: '电商系统',value: '电商系统'},--%>
								<%--]" style="width:276px; height:50px"/>--%>

							<select  id="need" name="need">
							<option disabled selected style="display: none;">所要需求</option>
							<option value="路政系统">路政系统</option>
							<option value="运政系统">运政系统</option>
							<option value="电商系统">电商系统</option>
							</select>
							<textarea placeholder="消息" rows="5" id="message" name="message"></textarea>
						</form>
						<a class="btn btn-primary">发送</a>
					</div>
					
				</div>
			</div>
		</div>
		<jsp:include   page="${ctx}/WEB-INF/jsp/website/footer.jsp" flush="true"/>
		<script src="${ctx}/ui/static/al/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="${ctx}/ui/static/al/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="${ctx}/ui/static/al/js/main.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="${ctx}/ui/static/common/layer/1.9.3/skin/layer.css"/>
		<script type="text/javascript" src="${ctx}/ui/static/common/layer/1.9.3/layer.js" charset="utf-8"></script>

		<script type="text/javascript" src="${ctx}/ui/static/easyui/jquery-easyui-1.4.1/jquery.min.js"></script>
		<script type="text/javascript" src="${ctx}/ui/static/easyui/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="${ctx}/ui/static/common/js/jquery-easyui-1.4.1/datagrid-detailview.js" charset="utf-8"></script>
		<script>
            $(".btn").click(function(){
                var data = $("form").serialize();
                var name = $('#name').val();
                var email = $('#email').val();
                var tel = $('#tel').val();
                if(!name){
                    layer.msg('请输入姓名！',{icon:2,time:1000});
                    $('#name').focus();
                    return false;
                }

                if(email){
                    if(!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(email)){
                        layer.msg('请输入正确的邮箱！',{icon:2,time:1000});
                        $('#email').focus();
                        return false;
                    }
                }

                if(!tel){
                    layer.msg('请输入电话！',{icon:2,time:1000});
                    $('#tel').focus();
                    return false;
                }
                //^1[3|4|5|8]\d{9}$
                if(!/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/.test(tel)){
                    layer.msg('请输入正确的电话号码！',{icon:2,time:1000});
                    $('#tel').focus();
                    return false;
                }

                $.ajax({
                    type:"POST",
                    url:"${ctx}/contact/save",
                    data: data,
                    success: function(data) {
                       if(data){
                           layer.msg('发送成功！');
					   }
                    },
                    error:function () {
                        layer.msg('网络异常！发送失败！');
                    }
                });
                return false;
            });
		</script>
	</body>
</html>
